define(function(require,exports,module){
	var echarts=require('echarts');
	module.exports=MProductPage;
function MProductPage() {
	this.myChart = '';
	this.titles = 
		[
			{
			    text: '涨跌幅：',
			    textStyle: {
			        fontSize: 14,
			        color: '#666',
			        fontWeight: 'normal'
			    },
			    left: 'left',
			    top: '10'
			},
			{
				text: '',
				textStyle: {
					fontSize: 14,
					color: '#ff1833',
					fontWeight: 'normal'
				},
				left: '55',
				top: '10'
			}
		];
	this.initChart = function(data) {
		var _this = this;
		_this.myChart = echarts.init(document.getElementById('myEcharts'));
		_this.updateRange(data.range);
		var option = {
			title: _this.titles.concat([{
		        show: false,
		    }]),
			tooltip : {
				trigger : 'axis',
				axisPointer: {
					type: 'line',
					lineStyle: {
						color: '#e76364',
						width: '1',
						type: 'dotted'
					}
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				boundaryGap : false,
				
				data : data.date,
				axisLine: {
					lineStyle: {
						color: '#999',
						width: '0',
						type: 'solid',
					}
				},
				axisLabel: {
					interval: 'auto',
					inside: false,
					margin: '12',
					textStyle: {
						color: '#999',
					}
				},
				axisTick: {
					length: '4',
					lineStyle: {
						color: '#999',
						width: '1'
					}
				}
			} ],
			yAxis : [ {
				type : 'value',
				// min: 0.5,
				// max: 2,
				axisLabel : {
					formatter : '{value}'
				},
				axisLine: {
					lineStyle: {
						color: '#999',
						width: '0',
						type: 'solid',
					}
				},
				axisLabel: {
					interval: 'auto',
					inside: false,
					margin: '8',
					textStyle: {
						color: '#999',
					}
				},
				axisTick: {
					length: '0',
					lineStyle: {
						color: '#999',
						width: '1'
					}
				}
			} ],
			grid : {
				x : 40,
				y : 70,
				x2 : 20,
				y2 : 35
			},
			dataZoom: {
                show: false,
                realtime: true,
                start: 0
            },
			series : [ {
				name : '净值',
				type : 'line',
				smooth : true,
				itemStyle : {
					normal : {
						color: '#e76364',
			            borderColor: '#ff1833',
			            borderWidth: '1',
						areaStyle : {
							type : 'default'
						}
					}
				},
				lineStyle: {
					normal: {
						color: '#e76364',
						width: '1',
						type: 'solid',
					}
				},
				data : data.data,
				markPoint : {
					data : [ {
						type : 'max',
						name : '最大值'
					}, {
						type : 'min',
						name : '最小值'
					} ]
				}
			} ]
		};

		_this.myChart.setOption(option);
		
		
	}
	
	this.dispatchAction = function(val, start, end) {
		var _this = this;
		_this.myChart.dispatchAction({
		    type: 'dataZoom',
/*		    start: 0,
		    end: 100,*/
		    startValue: start,
		    endValue: end
		});
		
		_this.updateRange(val);
		var option2 = {
			title: _this.titles.concat([{
				show: false
		    }])
		}
		_this.myChart.setOption(option2);
	}
	
	this.updateRange = function(val) {
		var _this = this;
		_this.titles[1].text = (val*100).toFixed(2) + '%';
		if(val >= 0) {
			_this.titles[1].textStyle.color = '#ff1833';
		} else {
			_this.titles[1].textStyle.color = '#11b864';
		}
	}
}
})